<template>
    <div>
        <Form ref="form" :model="createData" :label-width="70">
            <Row :gutter="10" type="flex">
                <Col>
                    <FormItem label="日期：">
                        <DatePicker type="daterange" v-width="'100%'" v-model="createData.date"
                                    placeholder="日期选择" element-id="date" :clearable="false" @on-change="onSearchItem"/>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem prop="belong_assistant_id" label="维度：">
                        <Select v-model="createData.belong_assistant_id" placeholder="请选择" @on-change="selectDimension">
                            <Option v-for="item in dimension" :key="item.id" :value="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div>
            <Table type="expand" border size="small" row-key="id" ref="table" :columns="columns" :data="tdata" :loading="loading"></Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                    :total="total"
                    :current.sync="page"
                    show-total
                    show-elevator
                    :page-size="pageSize"
                    @on-change="changePage"
                    :page-size-opts="pageOpts"
                    show-sizer transfer
                    @on-page-size-change="changePageSize"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    import mixins from '@/utils/mixins'
    import { getReportManagement } from '@/api/report'
    export default {
        name: 'table-list',
        mixins: [mixins],
        data () {
            return {
                loading: false,
                tdata: [],
                columns: [
                    {
                        title: '日期',
                        key: 'time',
                        minWidth: 118,
                        fixed: 'left'
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 118,
                        fixed: 'left',
                        tree: true
                    },
                    {
                        title: '总挂号',
                        key: 'reg_num',
                        minWidth: 65
                    },
                    {
                        title: '咨询号',
                        key: 'advisory_num',
                        minWidth: 65
                    },
                    {
                        title: '流失',
                        key: 'loss_num',
                        minWidth: 65
                    },
                    {
                        title: '流失率',
                        key: 'loss_rate',
                        minWidth: 65
                    },
                    {
                        title: '初诊人数',
                        key: 'initially_num',
                        minWidth: 65
                    },
                    {
                        title: '复诊人数',
                        key: 'referral_num',
                        minWidth: 65
                    },
                    {
                        title: '就诊人数',
                        key: 'treat_num',
                        minWidth: 65
                    },
                    {
                        title: '上月就诊数',
                        key: 'last_month_treat_num',
                        minWidth: 110
                    },
                    {
                        title: '断诊率',
                        key: 'diagnosis_rate',
                        minWidth: 65
                    },
                    {
                        title: '介绍号',
                        key: 'introduction_num',
                        minWidth: 65
                    }
                ],
                createData: {
                    date: [],
                    belong_assistant_id: '1'
                },
                yesterdayT: '',
                nowMonthOn: ''
            }
        },
        created () {
            this.getTime()
        },
        mounted () {
            this.onLoad()
        },
        methods: {
            getTime () {
                const now = new Date()
                const nowMonth = now.getMonth()
                const nowYear = now.getFullYear()
                const time = (now).getTime() - 24 * 60 * 60 * 1000
                this.yesterdayT = new Date(time)
                this.nowMonthOn = new Date(nowYear, nowMonth, 1)
                this.createData.date = [this.nowMonthOn, this.yesterdayT]
            },
            onConfig () {
                return {
                    // 1：日、 2： 月、 3： 年
                    type: this.createData.belong_assistant_id,
                    start_time: this.createData.date[0] !== '' ? dayjs(this.createData.date[0]).format('YYYY-MM-DD') : '',
                    end_time: this.createData.date[1] !== '' ? dayjs(this.createData.date[1]).format('YYYY-MM-DD') : '',
                    page: this.page,
                    pageSize: this.pageSize
                }
            },
            onLoad () {
                this.loading = true
                const config = this.onConfig()
                getReportManagement(config).then(res => {
                    if (res.list && res.list.length > 0) {
                        res.list[0]._showChildren = true
                    }
                    this.total = res.total
                    this.tdata = res.list
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            onSearchItem (e) {
                this.page = 1
                this.onLoad()
            },
            selectDimension (e) {
                this.page = 1
                this.onLoad()
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ivu-table-cell-tree {
        text-align: center;
        .ivu-icon {
            vertical-align: middle;
        }
    }
</style>
